<template>
	<view class="container">
		<view class="header-board">
			<view @click="onIconBtnClick" class="back-img">
				<image src="../../static/images/common/back.png" />
			</view>
			<view class="title">{{ datalist.topic }}</view>
		</view>
		<scroll-view class="topic-scroll-board" :style="'height: calc(100% - {{ navbarHeight }}px);'">
			<list :key='index' v-for="(item,index) in datalist.lists"  :item="item"></list>
		</scroll-view>
		
		<loading></loading>

	</view>
</template>

<script>
import list from '@/component/list/list.vue'
import tools from '../../utils/tools.js'
import { TOPIC, topci_mappers, music_topic_mapper,story_topic_mapper } from '@/config/topic';
export default {
	components:{
		list,
	},
	data() {
		return {
			param: {},
			datalist: [],
			title:'',
			loadModal:false,
			
			topic:'',
			type:'',
			navbarHeight:0
		};
	},
	onLoad() {
		// this.getNavBarHeight()
		this.init()
	},
	methods: {
		  /**
		   * @description 获取导航栏高度
		   * @returns {void}
		   */
		  // getNavBarHeight () {
			 //  this.navbarHeight=tools.getNavBarHeight()
			 //  checkUserIsLogin(this.navbarHeight)
		    
		  // },
		init(){
			const state = this.$store.state;
			this.topic=state.topic,
			this.type=state.type,
			this.title= topci_mappers[state.topic][state.type]


			switch (this.topic) {
			      case TOPIC.MUSIC:
			        // 获取音乐主题列表
					
			        this.getMusicTopicList(this.type, 15);
			        break;
			      case TOPIC.STORY:
				  console.log('STORY');
			        // 获取故事主题列表
			        // this.getStoryTopicList(this.type, 15);
			        break;
			      default:
			        break;
			    }
		},
		
		  /**
		   * @description 获取故事主题列表
		   * @param {number} topic - 主题类型
		   * @param {number} page - 页码
		   * @returns {void}
		   */
		  // async getStoryTopicList (topic, page) {
			  
			 //  // this.$store.commit('startLoading')
			 //  console.log(111);
			 //  uniCloud.callFunction({
			 //  		name: 'story',
			 //  		data: {
			 //  			field: story_topic_mapper[topic],
			 //  			action: topic,
			 //  			limit: page
			 //  		}
			 //  	})
			 //  	.then(res => {
			 //  		console.log(res);
			 //  		// this.datalist = res.result.data;
			 //  		// this.$store.commit('endLoading')
			 //  	});
		  // },
		  /**
		   * @description 获取音乐主题列表
		   * @param {number} topic - 主题类型
		   * @param {number} page - 页码
		   * @returns {void}
		   */
		  async getMusicTopicList (topic, page) {
			this.$store.commit('startLoading')
			uniCloud
				.callFunction({
					name: 'music',
					data: {
						field: music_topic_mapper[topic],
						action: 'topic',
						limit: page
					}
				})
				.then(res => {
					console.log(res.result.data);
					this.datalist = res.result.data;
					this.$store.commit('endLoading')
				});
		   
		  },
		
		onIconBtnClick(){
			uni.navigateBack({
				delta:1
			})
		},
	},
	
};
</script>

<style lang="scss">
	
		
	.container{
		box-sizing: border-box;
		// padding-top: 90rpx;
	}
	.header-board {
	  position: fixed;
	  top: 40rpx;
	  left: 0;
	  z-index: 2;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  width: 100%;
	  height: 100rpx;
	  margin-top: 40rpx;
	}
	
	.header-board .back-img {
	  position: absolute;
	  left: 0rpx;
	  top: calc(50% - 50rpx);
	  width: 100rpx;
	  height: 100rpx;
	  border-radius: 50%;
	  overflow: hidden;
	}
	
	.header-board .title {
	  font-size: 38rpx;
	  color: #E6E7F2;
	}
	
	.topic-scroll-board {
		width: 100%;
		margin-top: 180rpx;
	  display: flex;
	  flex-direction: row;
	  flex-wrap: wrap;
	  justify-content: space-around;
	  
	  padding: 0 30rpx 60rpx 30rpx;
	  box-sizing: border-box;
	  
	}
</style>
